<template>
	
	<su-tabs
		borderNode
		:list="state.list" 
		:current="state.current"
		backgroundColor="transparent"
		:lineColor ="data.line.color"
		:itemStyle="{ height: data.height+'px' }"
		:activeStyle="{
			color:data.activeStyle.color,
			fontSize:data.activeStyle.size,
		}"
		:inactiveStyle="{
			color:data.inactiveStyle.color,
			fontSize:data.inactiveStyle.size,
		}"
		@change="tabChange" >
		<template #right>
			<view class="ss-p-x-8" @click="toCategory">
				<uni-icons type="bars" :color="data.activeStyle.color" size="26" />
			</view>
		</template>
		</su-tabs>
</template>

<script setup>
  /**
   * 图片组件
   */
  import sheep from '@/sheep';
	import { reactive ,onMounted} from "vue"
  // 接收参数
  const props = defineProps({
    data: {
      type: Object,
      default: () => ({}),
    },
    styles: {
      type: Object,
      default: () => ({}),
    },
  });
  const state = reactive({
	  current:0,
	  fixed:false,
	  list:[]
  })
  onMounted(()=>{
	  if(props.data.id){
		  getCategory()
	  }
  })
  function toCategory(){
	  sheep.$router.go('/pages/index/category',{id:props.data.id})
  }
  async function getCategory(){
	  const { error, data } = await sheep.$api.category.list({
	    id: props.data.id,
	  });
	  if (error === 0) {
	    state.list = [{id:-999,name:'推荐'},...data.children]
	  }
  }
  function tabChange(e){
	  state.current = e.index
	  uni.$emit('categorylist',e.id)
  }
</script>

<style lang="scss" scoped>
.sticky{
	position: fixed;
	z-index: 10;
}
.fixed{
}
</style>
